<template>
    <h1>注册-手机号</h1>
    <van-form @submit="checkPhone">
      <van-field
        v-model="username"
        name="tel"
        label="手机号"
        placeholder="用户名"
        required
        :rules="usernameRule"
        @end-validate="checkPhone"
      />
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          下一步
        </van-button>
      </div>
      
    </van-form>
    <p @click="goreg" class="gologin">已有账号去登录</p>
  </template>
  
  <script>
  import { showSuccessToast, showFailToast } from "vant";
  import NavBack from "../../components/NavBack.vue";
  
  export default {
    name: "Reg",
    components:{
      NavBack
    },
    data() {
      return {
        usernameRule: [
          {
            required: true,
            message: (value, rule) => {
              if (value === "") {
                return "请输入手机号";
              } else if (!rule.pattern.test(value)) {
                return "手机号不合法";
              }
            },
            pattern: /^1\d{10}$/,
          },
        ],
        username: "",
      };
    },
    methods: {
      checkPhone(status) {
        if (status.status === "passed") {
          this.$http({
            url: "/user/docheckphone",
            method: "post",
            data: {
              tel: this.username,
            },
          }).then((res) => {
            if (res.data.code === "10005") {
              showFailToast("该用户名已经被注册,快去登录");
            } else if (res.data.code === "200") {
              showSuccessToast("该用户可以使用");
              this.$router.push({
                name:"Regsms",
                params:{
                  tel:this.username
                }
              });
            }
          });
        }
      },
      goreg(){
        this.$router.push('./Login')
      }
    },
  };
  </script>
  
  <style scoped>
    h1{
      width: 100%;
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      margin: 20px auto;
    }
    .gologin{
      display: flex;
      justify-content: end;
      margin-right:20px ;
      font-weight: 700;
    }
  </style>